<template>
	<view style="padding-top: 30rpx;">

		<view class="card">
			<view class="text-center u-font-32">确认充值账户信息</view>
			<view class="text-center u-font-26 u-m-t-12" style="color: #999;">店铺名称：{{nikeName}}</view>
			<view class="text-center u-font-26 u-m-t-12" style="color: #999;">店铺编号：{{companyId}}</view>
			<view class="text-center u-m-t-32">
				<u--input placeholder="请输入充值金额" border="surround" v-model="rechangeMoney" class="amount"></u--input>
			</view>
			<view class="flex u-row-center u-m-t-80">
				<view class="u-font-34" @click="handlerechangeBySqbXcx"
					style="width: 320rpx;height: 80rpx;background-color: #81D8CF;color: aliceblue;line-height: 80rpx;text-align: center;border-radius: 5rpx;">
					确认充值</view>
			</view>
		</view>
		<web-view :src="sqbUrl" v-if="rechangeOk"></web-view>
	</view>
</template>

<script>
	import login from '@/components/x-unit/login/login.vue'
	import {
		rechangeBySqbXcx
	} from '@/common/api/api.js'
	export default {
		components: {
			login,
		},
		data() {
			return {
				tab: 'bill',
				billInfo: {
					counts: 0,
					money: 0
				},
				companyId: '',
				nikeName: '',
				rechangeMoney: '',
				rechangeOk:false,
				sqbUrl:''
			}
		},
		onLoad(options) {
			if (!this.$store.state.$token) {
				setTimeout(() => {
					this.$refs.login.open();
				}, 100);
			} else {
				console.log(this.$store.state.$userInfo.companyId)
				this.companyId = options.centShopId;
				this.nikeName = options.name;
			}
		},
		onShow() {
		},
		methods: {
			handlerechangeBySqbXcx() {
				rechangeBySqbXcx({
					userId: this.$store.state.$token,
					rechangeMoney: this.rechangeMoney,
					centShopId: this.companyId,
					companyName:this.nikeName
				}).then(res => {
					    let payment=res.data.biz_response.data.wap_pay_request;
						console.log("payment",payment)
						if (res.code == 200) {
							uni.requestPayment({
								provider: "payment",
								timeStamp: payment.timeStamp,
								nonceStr: payment.nonceStr,
								package: payment.package,
								signType: payment.signType,
								paySign: payment.paySign,
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
									uni.reLaunch({
										url: '/pages/personal/personal'
									})
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
									// uni.reLaunch({
									// 	url: '/pages/order/order'
									// })
								}
							})
						}
					 
				})
			}

		}
	}
</script>

<style lang="scss">
	.navbar-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		height: 176rpx;
		background: linear-gradient(90deg, #C8CDFF 0%, #CBFFFA 54%, #81D8CF 100%);
		border-radius: 0px 0px 0px 0px;
		filter: blur(50rpx);
	}

	.navbar {
		background: linear-gradient(90deg, #C8CDFF 0%, #CBFFFA 54%, #81D8CF 100%);
	}

	.cell2 {
		width: 686rpx;
		height: 140rpx;
		background: linear-gradient(90deg, #F6FFFB 0%, #FFFFFF 50%, #FFFFFF 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #FFFFFF;

		.name {
			font-size: 28rpx;
			font-weight: 800;
			color: #333333;
		}

		.tips {
			font-size: 24rpx;
			color: #F97D3F;
		}

		.line {
			width: 0px;
			height: 80rpx;
			opacity: 1;
			border: 2rpx solid #EEEEEE;
			margin-top: 30rpx;
		}
	}

	.card {
		padding-top: 24rpx;
		padding-bottom: 28rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 30rpx;
		width: 686rpx;
		min-height: 320rpx;
		border-radius: 16rpx;
		border: 2rpx solid #FFFFFF;

		.title {
			position: relative;
			z-index: 1;
			font-size: 36rpx;
			font-weight: normal;
			color: #282828;
			font-weight: 800;
		}

		.title::before {
			position: absolute;
			bottom: 4rpx;
			z-index: -1;
			content: '';
			width: 90rpx;
			height: 8rpx;
			background: linear-gradient(90deg, #FD6140 0%, rgba(253, 96, 61, 0) 100%);
			border-radius: 0px 0px 0px 0px;
		}

		.green-title {
			position: relative;
			z-index: 1;
			font-size: 36rpx;
			font-weight: normal;
			color: #282828;
			font-weight: 800;
		}

		.green-title::before {
			position: absolute;
			bottom: 4rpx;
			z-index: -1;
			content: '';
			width: 90rpx;
			height: 8rpx;
			background: linear-gradient(90deg, #81D8CF 0%, rgba(129, 216, 207, 0) 100%);
			border-radius: 0px 0px 0px 0px;
		}


		.note {
			font-size: 24rpx;
			color: #999999;
			margin-left: 12rpx;
		}

		.label {
			font-size: 32rpx;
			font-weight: 800;
			color: #333333;
		}
	}

	.g-red {
		background: linear-gradient(180deg, #FFF4F2 0%, #FFFFFF 50%, #FFFFFF 100%);
		opacity: 1;
	}

	.product {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		// overflow-y: scroll;
	}
</style>
<style scoped lang="scss">
	.card {
		margin: 32rpx;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 32rpx 32rpx;

		.unit {
			font-size: 40rpx;
			color: #81D8CF;
			font-weight: 800;
		}

		.amount {
			font-size: 60rpx;
			font-weight: 800;
			color: #81D8CF;
			margin-left: 10rpx;
		}
	}
</style>